<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>登录页面</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
	<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container" style="width: 200px;margin-top: 150px " >
	<div style="margin-left:40px">
		<h1>请登录</h1>
		<p style="margin-left: 0px;color: red">${msg}</p>
	</div>
	<form role="form" class="form-horizontal" action="${pageContext.request.contextPath}/login" method="post" id="form">
		<div class="form-group">
			<label >用户名</label>
			<p id="queMessage"></p>
			<input class="form-control" name="username" id="username"/>
		</div>
		<div class="form-group">
			<p id="pueMessage"></p>
			<label >密码</label>
			<input class="form-control" type="password" name="password" id="password"/>
		</div>
		<div class="form-group">
			<input class="form-control btn btn-success" type="submit" value="登录">
		</div>
<%--		<div class="form-group">
			<a class="btn btn-info" style="width: 200px" href="register.jsp">注册</a>
		</div>--%>
	</form>
</div>
</body>
</html>
<script>
	$(function () {
		$("#username").blur(function () {
			checkUsername();
			// test();
			// jqueryJson();
		})
		$("#password").blur(function () {
			checkPassword();
		})
		$("#form").submit(function () {
			return checkUsername()&&checkPassword();
		})
		json();
	})
	function checkUsername() {
		let username = $("#username").val();
		let msg = $("#queMessage");
		if (username == null || username == ""){
			msg.html("用户名不能为空").css("color","red").css("font-size","12px");
			return false;
		}else if (username.length<4){
			msg.html("用户名长度不能小于4").css("color","red").css("font-size","12px");
		}
		else {
			msg.html("格式正确").css("color","green").css("font-size","12px");
			return true;
		}
	}
	function checkPassword() {
		let password = $("#password").val();
		let msg = $("#pueMessage");
		if (password == null || password == ""){
			msg.html("密码不能为空").css("color","red").css("font-size","12px");
			return false;
		}else if (password.length<6){
			msg.html("用户名长度不能小于6").css("color","red").css("font-size","12px");
		}else {
			msg.html("格式正确").css("color","green").css("font-size","12px");
			return true;
		}
	}
	function test() {
		let xmlHttp;
		//1.创建对象
		if (window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else if (window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XML")
		}
		let username = document.getElementById("username").value;
		//2.打开链接
		xmlHttp.open("get","${pageContext.request.contextPath}/testuname?username="+username,true);
		//3.返回回调函数
		xmlHttp.onreadystatechange = function () {
			//3.1判断状态
			if(xmlHttp.readyState==4){
				//3.2 接收返回的数据
				let responseText = xmlHttp.responseText;
				document.getElementById("queMessage").innerText = responseText;
			}
		}
		//4.发送数据
		xmlHttp.send();
	}
	function jqueryTest() {
		let username = $("#username").val();
		$.ajax({
			url:"${pageContext.request.contextPath}/testuname",
			data:"username="+username,
			type:"get",
			dataType:"text",
			success:function (rs) {
				console.log(rs);
				$("#queMessage").html(rs).css("color","green").css("font-size","12px");
			}
		});
		// $.get()
		/*    $.get("${pageContext.request.contextPath}/testuname","username="+username,function (rs) {
      console.log(rs);
      $("#queMessage").html(rs);
    });*/
		/*    $.post("${pageContext.request.contextPath}/testuname","username="+username,function (rs) {
      console.log(rs);
      $("#queMessage").html(rs);
    });*/
	}
	function json(){
		let j1 = {
			"name":"张三",
			"age":18
		}
		let j2 = {
			"names":["aa","vv","dd"]
		}
		console.log(j2.names[0]);
		let j3 = {
			"users":[
				{
					"name":"张1",
					"age":18
				},{
					"name":"张2",
					"age":16
				},{
					"name":"张3",
					"age":19
				}
			]}
		console.log(j3.users[0].name);
	}
	function jqueryJson(){
		let username = $("#username").val();
		$.ajax({
			url:"${pageContext.request.contextPath}/testuname",
			data:"username="+username,
			type:"post",
			//返回的数据格式
			dataType:"json",
			success:function (data) {
				$("#password").val(data.password);
			}
		})
	}
</script>